<template>
	<view class="food-detail-content">
		<Swiper style="width: 100%;height: 400rpx;" :styleObj="{width:'100%',height:'400rpx',borderRadius:0}" :list="banner"></Swiper>
		<CustomNav :custom="custom" :isBack="true" :backColor="'#fff'" :title="detail.name" :topBgColor="topBgColor" :color="titleColor"></CustomNav>
		<view class="info-block name-block">
			<view class="name">{{detail.name}}</view>
			<view class="star">
			<view class="iconfont icon-shoucang" style="color: #FD8249;"></view>
			<view class="score">{{detail.score}}</view>
			</view>
		</view>
		<view class="info-block introduce-block">
			<view class="block-title">简介</view>
			<view class="block-content">
				<mp-html :content="detail.content"></mp-html>
			</view>
		</view>
	</view>
</template>

<script>
	import {getFoodDetail} from '@/api/comprehensive.js';
	export default{
		data(){
			return{
				custom:null,
				detail:{
					
				},
				banner:[],
				titleColor:'rgba(0,0,0,0)',
				topBgColor:'rgba(0,0,0,0)',
			}
		},
		methods:{
			getDetail(id){
				uni.showLoading({
					title:'加载中',
					mask:true,
				})
				getFoodDetail({id}).then((res)=>{
					uni.hideLoading()
					if(res.status==1){
						this.detail=res.data;
						this.banner=res.data.files;
					}else{
						this.utils.showToast(res.message,()=>{
							uni.navigateBack()
						})
					}
				}).catch((res)=>{
					uni.hideLoading()
					this.utils.showToast('加载失败，请重试',()=>{
						uni.navigateBack()
					})
				})
			}
		},
		onLoad(e) {
			this.custom=this.utils.getCustomNavData();
			this.getDetail(e.id);
		},
		onPageScroll(e) {
			if(e.scrollTop>=90){
				this.topBgColor='#32CCCA';
				this.titleColor='#fff';
			}else{
				this.topBgColor='rgba(0,0,0,0)';
				this.titleColor='rgba(0,0,0,0)';
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100vh;
		background: #F6F6F6;
	}
	
	.food-detail-content{
		width: 100%;
		.info-block{
			background: #fff;
			margin-bottom: 10rpx;
			position: relative;
			padding: 30rpx;
		}
		.info-block.name-block{
			margin-top: -40rpx;
			border-radius: 40rpx 40rpx 0 0;
			display: flex;
			flex-direction:column;
			.star{
				font-size: 30rpx;
				margin: 20rpx 0;
				display: flex;
				align-items: center;
				.score{
					font-weight: bold;
					margin-left: 20rpx;
				}
			}
			.describe{
				margin-top: 20rpx;
				font-size: 26rpx;
				color: #999;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			.label-block{
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin-top: 20rpx;
				.label-item{
					background: #DDFDFE;
					color: $uni-color-primary;
					font-size: 24rpx;
					padding: 5rpx 10rpx;
					margin-bottom: 16rpx;
					margin-right: 16rpx;
					border-radius: 12rpx;
				}
				.label-information{
					font-size: 30rpx;
					border-radius: 12rpx;
					
				}
				.label-information3{
					padding-right: 0rpx;
					padding-left: 90rpx;
					
					
				}
				.label-title{
					font-size: 24rpx;
					color: #9ca2a2;
					margin-bottom: 16rpx;
					border-radius: 12rpx;
					text-align: center;
				}

			}
			.name{
				font-size: 48rpx;
				font-weight: bold;
				margin-top: 20rpx;
			}
			.score-block{
				display: flex;
				margin-top: 20rpx;
				align-items: center;
				.iconfont{
					color: #FD8249;
					font-size: 28rpx;
					margin-right: 20rpx;
				}
				.score{
					font-size: 30rpx;
					font-weight: bold;
				}
			}
		}
		.info-block.phone-block{
			display: flex;
			flex-direction: column;
			padding: 20rpx 30rpx;
			.item{
				width: 100%;
				border-bottom: 1px solid #efefef;
				display: flex;
				flex-direction: row;
				align-items: center;
				padding: 20rpx 0;
				.iconfont{
					width: 60rpx;
					height: 60rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 34rpx;
					font-weight: bold;
					margin-right: 10rpx;
				}
				.value{
					width: calc(100% - 130rpx);
					display: flex;
					align-items: center;
					font-size: 30rpx;
				}
			}
			.item:last-child{
				border: none;
			}
		}
		.info-block.introduce-block{
			display: flex;
			flex-direction: column;
			.block-title{
				font-size: 34rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.img{
				width: 49%;
				height: 250rpx;
				
			}
		}
	}
</style>